<template>
  <div class="shop-cart-box">
    <!-- 商品列表 -->
    <div class="goods_list">
      <div class="mui-card" v-for="(item, index) in goodsList" :key="item.id">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <mt-switch v-model="$store.getters.getGoodsStatus[item.id]" @change="toggle(item.id)"></mt-switch>
            <img :src="item.thumb_path" alt>
            <div class="info">
              <h1>{{item.title}}</h1>
              <p>
                <span>￥{{item.sell_price}}</span>
                <number-box :count="$store.getters.getGoodsCount[item.id]" :id="item.id"></number-box>
                <a href="#" @click.prevent="del(item.id, index)">删除</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 总计 -->
    <div class="total">
      <div class="mui-card">
        <div class="mui-card-content">
          <div class="mui-card-content-inner">
            <div>
              <p>总计 （不含运费）</p>
              <p>
                已勾选的商品
                <span>{{$store.getters.getGoodsAmount.amount}}</span> 件, 总价
                <span>￥{{$store.getters.getGoodsAmount.total}}</span>
              </p>
            </div>
            <mt-button type="danger">去结算</mt-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NumberBox from "../subcomponent/ShopcartNumberbox.vue";
export default {
  data() {
    return {
      goodsList: [],
      flag: false
    };
  },
  created() {
    this.getGoodsInfo();
  },
  methods: {
    //   获取商品列表
    getGoodsInfo() {
      let ids = [];
      this.$store.state.cart.forEach(item => {
        ids.push(item.id);
      });
      // 如果购物车中没有商品，则退出
      if (ids.length <= 0) {
        return;
      }
      this.$http.get("api/goods/getshopcarlist/" + ids.join(",")).then(rs => {
        if (rs.body.status === 0) {
          this.goodsList = rs.body.message;
        }
      });
    },
    // 修改商品是否启用
    toggle(id) {
      console.log(id);
      this.$store.commit("changeStatus", id);
    },
    // 删除商品
    del(id, index) {
      // console.log(id, index);
      // 先删除goodsList 里面的那一项
      this.goodsList.splice(index, 1);
      // 在删除 状态管理 里面的那一项
      this.$store.commit("deleCart", id);
    }
  },
  components: {
    numberBox: NumberBox
  }
};
</script>   

<style lang="scss" scoped>
.shop-cart-box {
  .goods_list {
    .mui-card {
      .mui-card-content-inner {
        display: flex;
        align-items: center;
        // justify-content: space-around
      }
      img {
        width: 50px;
        height: 50px;
        padding: 0 10px;
      }
      h1 {
        font-size: 13px;
        margin: 0;
        margin-bottom: 10px;
      }
      .info {
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        p {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0px;
          span {
            color: red;
            font-weight: bold;
            font-size: 16px;
          }
        }
        .mui-numbox {
          height: 25px;
        }
      }
    }
  }

  .total {
    .mui-card-content-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    span {
      font-size: 14px;
      color: red;
      font-weight: bold;
    }
  }
}
</style>
